<template>
    <div>
        <vue-office-docx :src="docx" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" />
    </div>
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
    name: "VueOfficeDocxDemo",
    components: {
        VueOfficeDocx
    },
    data() {
        return {
            docx:'http://127.0.0.1:9000/senior-valve-hub/tutorials/%E6%B5%8B%E8%AF%953.0.docx',
            // docx: '/api/api/v1/download-shared-object/aHR0cDovLzEyNy4wLjAuMTo5MDAwL3Nlbmlvci12YWx2ZS1odWIvdHV0b3JpYWxzLyVFNyU5MyVBMyVFOCU4NiU5QyVFNyU5NyU4NSVFNiVCNSU4QiVFOCVBRiU5NS5kb2N4P1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9R1ZZNjM1RThUVkJLMEozM1NNOUslMkYyMDI1MDUyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTA1MjZUMDIxNDI1WiZYLUFtei1FeHBpcmVzPTQzMjAwJlgtQW16LVNlY3VyaXR5LVRva2VuPWV5SmhiR2NpT2lKSVV6VXhNaUlzSW5SNWNDSTZJa3BYVkNKOS5leUpoWTJObGMzTkxaWGtpT2lKSFZsazJNelZGT0ZSV1Frc3dTak16VTAwNVN5SXNJbVY0Y0NJNk1UYzBPREkyT0RnME5pd2ljR0Z5Wlc1MElqb2liV2x1YVc5aFpHMXBiaUo5LnRfS29NZ2RvN0ZodWtfWHhaZHhVRlh2WUoyLTYyQ1JYNFpnZG9rT04tbEFRUTlxd29yVWdhUmFVTmZKYkEwbXE5Y3dfXzYwNTRmTG83Yy1WMEJMM1l3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZ2ZXJzaW9uSWQ9bnVsbCZYLUFtei1TaWduYXR1cmU9MmY4MmZkYjZlYTM5NGZkMTIyZjMwNjZlMjYxZmFhYzBlODk0ZjAyNGJhZTFjZmRmMTcyYWE5MjU1NTFjZTIzZA',
            // docx: '/api/api/v1/download-shared-object/aHR0cDovLzEyNy4wLjAuMTo5MDAwL3Nlbmlvci12YWx2ZS1odWIvdHV0b3JpYWxzL3Rlc3QuZG9jP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9NEcyS0RCS1RJSkpSVjFOVFUyTEclMkYyMDI1MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTA1MjNUMTAyMDM4WiZYLUFtei1FeHBpcmVzPTQzMjAwJlgtQW16LVNlY3VyaXR5LVRva2VuPWV5SmhiR2NpT2lKSVV6VXhNaUlzSW5SNWNDSTZJa3BYVkNKOS5leUpoWTJObGMzTkxaWGtpT2lJMFJ6SkxSRUpMVkVsS1NsSldNVTVVVlRKTVJ5SXNJbVY0Y0NJNk1UYzBPREF6TmpBeU1Td2ljR0Z5Wlc1MElqb2liV2x1YVc5aFpHMXBiaUo5LjNsR251TVNLT0xkNF9Tdk10aVBxSDhtM3pXTDdTM3lqS2pFTHIwUHJXUHotSl9nTVRQTVdqdkp5WURsd3g5LWkxUWdlelV6S19ULXhMRnIzMWZKSUtBJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZ2ZXJzaW9uSWQ9bnVsbCZYLUFtei1TaWduYXR1cmU9YjZlNDhlMDgwODE2MDk5MDYyMmFmNTZmNThhNDQ1OGYyYzQwNzZmZWZkMjdhNWNhNDEwZGExNDA0NDIzOTY2Yg'
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
};
</script>

<style scoped></style>